<template>
<div class="Logistic">
    <div class="order-box">
        <div class="order-item">
            <div class="fz-15 blod shop-name text-left">
                轴承轴承 轴承轴承
            </div>
            <div class="order-goods flex-center" v-for="goods in detail.goods_list" :key="goods.id">
                <img :src="goods.img" alt="">
                <div class="goods_msg flex-1 flex-column-space-between">
                    <div class="name van-multi-ellipsis--l2 fz-12 blod text-left">
                        {{ goods.name }}
                    </div>
                    <div class="padd text-left">
                        <span class="price fz-15 blod">￥{{ goods.price }}</span> <span class="fz-12">x{{ goods.num }}</span>
                    </div>
                    <div class="flex-center-space-between fz-12">
                        <!-- <div ><van-icon name="location-o" />河北</div> -->
                        <!-- <van-button type="danger" size="mini" plain round hairline class="button">去支付</van-button>
                        <van-button type="" size="mini" plain round hairline class="button">查看物流</van-button> -->
                        <!-- <van-button type="danger" size="mini" plain round hairline class="button">退款/售后</van-button> -->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="order-number pr20 pl20 fz-12 text-left flex-center-start bgc-white van-hairline--bottom">
        <span class="text-gray">物流单号：</span> <span>{{ detail.logistics && detail.logistics.no }}</span>
        <!-- <span class="ml20"> <van-button size="mini" round>复制</van-button> </span> -->
    </div>
    <div class="recipients bgc-white height-80 pr20 pl20 flex-center van-hairline--bottom">
        <div class="fake-iocn fz-16">
            收
        </div>
        <div class="flex-1 pl20 text-left fz-12">
            <div class="pb4">
                <span class="text-gray">姓名：</span>
                <span>{{ detail.user_addr && detail.user_addr.name }}</span>
            </div>
             <div class="pb4">
                <span class="text-gray">电话：</span>
                <span>{{ detail.user_addr && detail.user_addr.phone }}</span>
            </div>
             <div class="pb4">
                <span class="text-gray">地址：</span>
                <span>{{ detail.user_addr && detail.user_addr.addr }} {{ detail.user_addr && detail.user_addr.addr_extra }}</span>
            </div>
             <div class="">
                <span class="text-gray">物流：</span>
                <span>{{ detail.logistics && detail.logistics.name }}</span>
            </div>
        </div>
    </div>
    <div class="pl20 bgc-white text-left pb20">
        <van-steps direction="vertical" :active="active" active-color="#ea251c">
            <van-step>
                <h4>待发货</h4>
            </van-step>
            <van-step>
                <h4>待收货</h4>
            </van-step>
            <van-step>
                <h4>已完成</h4>
            </van-step>
        </van-steps>

    </div>

</div>
</template>

<script>
export default {
    data () {
        return {
            detail: {}
        }
    },
    computed: {
        active () {
            if (!this.detail.status) return 0
            if (this.detail.status === 3) {
              return 2
            }
            if (this.detail.is_send === 0) {
              return 0
            } else {
              return 1
            }
        }
    },
    created () {
        this.$route.query.id && this.$goods.orderDetail(this.$route.query.id).then(res => {
            console.log(res.data.detail)
            this.detail = res.data.detail
        })
    }
}
</script>

<style lang="less" scoped>
.Logistic {
    padding-top: 10px;
}

.order-box {
    margin-bottom: 10px;
    .order-item {
        background-color: #fff;
        padding: 10px 20px;
        // &:first-child {
        //     margin-top: 10px;
        // }
        .shop-name {
            padding: 0 0 10px 0;
        }
        .order-goods {
            img {
                width: 80px;
                height: 80px;
            }
            .goods_msg {
                height: 80px;
                padding-left: 10px;
            }
        }
    }
}

.order-number {
    height: 40px;
}

.fake-iocn {
    background-color: @priceColor;
    color: #fff;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    line-height: 50px;
}
</style>
